<template>
  <div style="width: 100%; height: 100%; display: flex; flex-direction: column">
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <div class="main">
      <div class="main-org">
        <div class="flex flex-direction-column height100">
          <h4 style="margin-bottom: 12px">组织架构</h4>
          <el-tree
            v-loading="treeLoading"
            node-key="id"
            :data="treeForm"
            @node-click="handleNodeClick"
            default-expand-all
            highlight-current
            :current-node-key="checked ? checked.id : undefined"
            style="overflow-y: auto"
          ></el-tree>
        </div>
      </div>
      <div v-loading="statisticsLoading" class="main-content">
        <div class="main-title flex-y-center">
          <h4>{{ checked ? checked.label : '' }}</h4>
          <div style="display: flex; gap: 8px">
            <el-select
              size="mini"
              v-model="searchForm.companyId"
              placeholder="请选择公司"
              @change="handleCompanyChange"
            >
              <el-option
                v-for="company in options"
                :key="company.value"
                :label="company.label"
                :value="company.value"
              ></el-option>
            </el-select>
            <el-select
              clearable
              size="mini"
              v-model="searchForm.farmId"
              placeholder="请选择猪场"
            >
              <el-option
                v-for="farm in filteredFarms"
                :key="farm.value"
                :label="farm.label"
                :value="farm.value"
              ></el-option>
            </el-select>
            <el-date-picker
              size="mini"
              v-model="searchForm.timeBetween"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>

            <el-button type="primary" @click="handleSearch" size="mini"
              >查询</el-button
            >
          </div>
        </div>
        <div class="main-icon flex">
          <div class="flex" v-for="(item, index) in statistics" :key="index">
            <div class="circle"></div>
            <div>
              <el-statistic
                group-separator=","
                :precision="2"
                :value="item.value"
                :title="item.title"
              ></el-statistic>
            </div>
          </div>
        </div>
        <div class="main-chart-top">
          <div class="main-chart-average-time">
            <div class="flex flex-between flex-y-center">
              <h4 class="chart-title">耗时最短</h4>
              <el-button type="text" style="padding: 0">更多</el-button>
            </div>
            <TemplateEchart v-if="chart" :options="option1"></TemplateEchart>
          </div>
          <div class="main-chart-material-usage">
            <div class="flex flex-between flex-y-center">
              <h4 class="chart-title">物资使用</h4>
              <el-button type="text" style="padding: 0">更多</el-button>
            </div>
            <TemplateEchart v-if="chart" :options="option2"></TemplateEchart>
          </div>
        </div>
        <div class="main-chart-bottom flex flex-direction-column">
          <div class="flex flex-between flex-y-center">
            <h4 class="chart-title">接收物资场线TOP5</h4>
            <el-button type="text" style="padding: 0">更多</el-button>
          </div>

          <TemplateEchart v-if="chart" :options="option3"></TemplateEchart>

          <!-- <div style="width: 100%; flex: 1"></div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入echarts
import _ from 'lodash'
import { resTreeForm, resStatistic } from './res'
import TemplateEchart from './TemplateEchart.vue'

export default {
  name: 'Reports',
  components: {
    TemplateEchart,
  },
  data() {
    return {
      chart: false,
      // org
      treeForm: [],
      treeLoading: false,
      checked: null,
      // 右侧查询
      searchForm: {
        companyId: undefined,
        farmId: undefined,
        timeBetween: [],
      },
      // 公司选项
      options: [
        {
          label: '腾讯',
          value: 'TX_00001',
          // 猪场下拉
          children: [
            {
              label: '腾讯_猪场1',
              value: 'TX_00001_ZC_1',
            },
            {
              label: '腾讯_猪场2',
              value: 'TX_00001_ZC_2',
            },
          ],
        },
        {
          label: '字节',
          value: 'ZJ_00002',
          // 猪场下拉
          children: [
            {
              label: '字节_猪场1',
              value: 'TX_00001_ZC_1',
            },
            {
              label: '字节_猪场1',
              value: 'TX_00001_ZC_2',
            },
          ],
        },
      ],
      // 猪场选项
      filteredFarms: [],
      // 统计信息
      statisticsLoading: false,
      statistics: [],
      option1: {},
      option2: {},
      option3: {},
    }
  },
  mounted() {
    this.initOrg()
  },
  methods: {
    handleNodeClick(current) {
      this.checked = current
      this.initStatistic()
    },
    async initOrg() {
      this.treeLoading = true
      const res = await new Promise((resolve) => {
        setTimeout(() => {
          resolve(resTreeForm)
        }, 1000)
      }).finally(() => {
        this.treeLoading = false
      })
      this.treeForm = res
      this.checked = res[0]
      this.initStatistic()
    },
    async initStatistic() {
      this.statisticsLoading = true
      // console.log('拿到查询条件掉接口', this.checked, this.searchForm)

      const res = await new Promise((resolve) => {
        setTimeout(() => {
          resolve(resStatistic)
        }, 1000)
      }).finally(() => {
        this.statisticsLoading = false
      })
      this.statistics = res.statistics
      this.option1 = res.option1
      this.option2 = res.option2
      this.option3 = res.option3
      this.chart = true
    },
    handleCompanyChange(value) {
      const company = this.options.find((i) => i.value === value)
      if (company) {
        this.filteredFarms = company.children
        this.searchForm.farmId = undefined
      }
    },
    handleSearch() {
      this.initStatistic()
    },
  },
}
</script>
<style lang="less" scoped>
@gap: 12px;
.flex {
  display: flex;
}
.flex-direction-column {
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}

.flex-y-center {
  display: flex;
  // justify-content: center;
  align-items: center;
}
.flex-between {
  justify-content: space-between;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: @gap;
}

.circle {
  width: 46px; /* 按钮宽度 */
  height: 46px; /* 按钮高度 */
  border-radius: 50%; /* 使按钮成为圆形 */
  background-color: #00b79e; /* 按钮背景颜色 */
  border: none; /* 去掉边框 */
  cursor: pointer; /* 鼠标悬停时显示指针 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 4px;
}

/deep/.el-tree-node.is-current {
  .el-tree--highlight-current
    .el-tree-node.is-current
    > .el-tree-node__content {
    background-color: rgb(64, 159, 255) !important;
  }
}

.main {
  display: flex;
  width: 100%;
  flex: 1;
  min-height: 400px;
  overflow-y: auto;
  gap: @gap;
  .main-org {
    flex: 0 0 225px;
    // border: 1px solid rgba(187, 187, 187, 1);
    background: #fff;
    padding: 12px;
  }
  .main-content {
    flex: 1;
    // margin-left: 12px;
    display: flex;
    flex-direction: column;
    gap: @gap;
  }
  .main-title,
  .main-icon {
    height: 70px;
    // border: 1px solid rgba(187, 187, 187, 1);
    background: #fff;
    padding: 12px;
    justify-content: space-between;
  }
  // .main-title {
  //   justify-content: space-between;
  // }
  // .main-icon {
  //   justify-content: space-between;
  // }
  .main-chart-top {
    // height: 200px;
    flex: 1;
    // border: 1px solid rgba(187, 187, 187, 1);
    // background: #fff;
    display: flex;
    gap: 12px;
    .main-chart-average-time,
    .main-chart-material-usage {
      height: 100%;
      flex: 1;
      // border: 1px solid rgba(187, 187, 187, 1);
      background: #fff;
      padding: 12px;
      display: flex;
      flex-direction: column;
    }
  }
  .main-chart-bottom {
    height: 250px;
    // flex: 1;
    // border: 1px solid rgba(187, 187, 187, 1);
    background: #fff;
    padding: 12px;
  }
}
</style>
